<template>
  <div class="sidebar-container">
    <a-dropdown-button>
      {{ nickname }}
      <a-menu
        slot="overlay"
        @click="handleMenuClick"
      >
        <a-menu-item key="0">
          <a-icon type="user" />Account
        </a-menu-item>
        <a-menu-item key="1">
          <a-icon type="logout" />Log out
        </a-menu-item>
      </a-menu>
    </a-dropdown-button>
  </div>
</template>

<script>
import Logo from './Logo.vue';
import { mapGetters } from 'vuex';
import { Modal } from 'ant-design-vue';

export default {
  components: {
    Logo
  },

  computed: {
    ...mapGetters(['nickname', 'avatar'])
  },

  methods: {
    // handleMenuClick
    handleMenuClick({ key }) {
      switch (key) {
        // info
        case '0':
          this.handleToSettings();
          break;

        // log out
        case '1':
          this.handleLogout();
          break;

        default:
          break;
      }
    },

    handleToSettings() {
      this.$router.push({ path: '/account/settings' });
    },

    handleLogout(e) {
      Modal.confirm({
        title: 'Sign out',
        content: 'Are you sure you want to log out?',
        onOk: () => this.$store.dispatch('Logout').then(() => {
          this.$router.push({ name: 'login' });
        }),
        onCancel() {}
      });
    }
  }
};

</script>

<style lang="scss" scoped>
.sidebar-container {
  color: $theme-color;
}
</style>
